<template>
  <div class="notCommodity" v-if="products.length === 0">暂无商品，商品准备中。。。</div>
  <div class="productList" v-else>
    <div class="shopping" v-for="product in products">
      <div v-link="'buy-product-particular/?id=' + product.id">
        <div class="shopping-img">
          <img :src="$root.domain + product.goodsImg" alt="" />
        </div>
        <div class="shoppingProductList">
          <div class="shoppingList">
            <span class="productTitle">{{ product.goodsName }}</span>
            <span class="money">￥{{ product.goodsPrice/100 | currency "" }}
              元 / {{ product.goodsUnits }}</span>
          </div>
          <div class="welfare">{{ product.goodsDescribe }}</div>
        </div>
      </div>
    </div>
  </div>
  <div v-show="loadingBottom" class="loading-bottom">没有更多数据</div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        dialog: false,
        loadingBottom: false,
        products: [],
        pageNum: 1,
        pageSum: 0
      };
    },
    methods: {
      async scroll() {
        if (document.documentElement.scrollHeight - document.body.scrollTop <= document.documentElement.clientHeight) {
          this.loading = true;
          this.pageNum ++;
          let allProducts = await AJAX.allProduct("pageNum=" + this.pageNum);
          this.products = this.products.concat(allProducts.recordList);
          this.loading = false;
          this.pageSum = allProducts.pageSum + 1;
          if (this.pageNum > this.pageSum) {
            this.loadingBottom = true;
            setTimeout(() => {
              this.loadingBottom = false;
            }, 2000);
          }
        }
      }
    },
    async ready() {
      let allProducts = await AJAX.allProduct("pageNum=" + this.pageNum);
      this.products = allProducts.recordList;
      console.log(this.products.length);
      window.onscroll = () => {
        this.scroll();
      };
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .productList{
    font-size: .5rem;
    padding-right: .3rem;
    background-color: #E6E6E6;
    box-shadow: 10px 10px 5px #888888;
    .shopping:last-of-type{
      margin-bottom: 3rem;
    }
    .shopping{
      width:48%;
      float: left;
      margin-left: 2%;
      margin-top: 1%;
      margin-bottom: 1%;
      border-radius: .3rem;
      background-color: #fff;
      .shopping-img{
        height:4.2rem;
        border-top-left-radius: .3rem;
        border-top-right-radius: .3rem;
        border-bottom: 1px solid #E6E6E6;
        overflow: hidden;
        img{
          width:100%;
          height:100%;
        }
      }
      .shoppingProductList{
        .shoppingList{
          padding:.3rem .3rem;
          height:3rem;
          clear:both;
          overflow: hidden;
          .productTitle{
            float: left;
            color:#3F3F3F;
            height:1.8rem;
            width: 100%;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .money{
            float:right;
            color:#15A2D7;
            text-align: right;
          }
        }

        .welfare{
          padding: .1rem .2rem;
          height:1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: .5rem;
          color: #BFBFBF;
          text-align: right;
          background-color: #F5F5F5;
          border-bottom-left-radius: .3rem;
          border-bottom-right-radius:  .3rem;
        }
      }
    }
  }
  .loading-bottom{
    position: fixed;
    border:1px solid #000;
    bottom: 30%;
    left: 35%;
    background-color: #000;
    color: #fff;
    font-size: .6rem;
    padding:1rem;
    border-radius: .3rem;
    opacity: .6;
  }
  .notCommodity{
    padding:10rem 1rem;
    font-size: 1rem;
    color: #404040;
    text-align: center;
  }
</style>
